<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="shortcut icon" href="jygt.ico">
	<title>{$site_name}</title>
	<meta name="keywords" content="{$site_seo_keywords}" />
	<meta name="description" content="{$site_seo_description}">
	<meta name="author" content="国泰自动化">
	<tc_include file="Public:head" />
	<style type="text/css">
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	    position: relative;
	    min-height: 1px;
	    padding-left: 0;
	    padding-right: 0;
	}
	html,body {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	body {
		display: flex;
		align-items: center; /*定义body的元素垂直居中*/
		justify-content: center; /*定义body的里的元素水平居中*/
	}
	</style>
</head>
<body class="boxed">
	<div class="register-content">
		<div class="top">
			<a href="/"><img src="__TMPL__Public/front/img/retina/logo.png" style="width:300px; height:44px; margin:8px;" alt=""></a>
		</div>
		<div class="row">
			<div id="leftbg" class="col-md-7 hidden-sm hidden-xs">
				<div class="effect1 loginbg"></div>
			</div>
			<div class="col-md-5" style="padding:0 20px; margin-top:15px;">
				<form id="loginForm" class="form-horizontal js-ajax-form" action="{:U('user/register/doregister')}" method="post">
					<fieldset>
						<legend >
							<label><i class="glyphicon glyphicon-user"></i>&nbsp;用户注册
								<small style="color:#AE2628;">&nbsp;REGISTER</small>
							</label>
						</legend>
						<div class="form-group" id="nicknameDiv">
							<label class="col-md-3 control-label">真实姓名：&nbsp;</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="nicename" id="txt_nicename" placeholder="请输入真实姓名">
							</div>
							<div class="col-md-3" id="nicknameSpan"></div>
						</div>
						<div class="form-group">	
							<label class="col-md-3 control-label">手机号：&nbsp;</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="mobile" id="txt_mobile" placeholder="请输入手机号">
							</div>
							<div class="col-md-3" id="mobileSpan"></div>
						</div>
						<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-9" id="msgSpan">请填写人资系统中预留的姓名和手机号码！</div>
						</div>
						<div class="form-group" id="passwordDiv">
							<label class="col-md-3 control-label">密码：&nbsp;</label>
							<div class="col-md-6">
								<input type="password" class="form-control" name="password" placeholder="请输入密码">
							</div>
							<div class="col-md-3" id="passwordSpan"></div>
						</div>
						<div class="form-group" id="repasswordDiv">
							<label class="col-md-3 control-label">重复密码：&nbsp;</label>
							<div class="col-md-6">
								<input type="password" class="form-control" name="repassword" placeholder="请重复密码">
							</div>
							<div class="col-sm-3" id="repasswordSpan"></div>
						</div>						
						<div class="form-group">	
							<label class="col-md-3 control-label">手机验证码：&nbsp;</label>
							<div class="col-md-6">
								<input type="text" class="form-control" name="mobile_code" placeholder="手机验证码">
							</div>
							<div class="col-md-2" style="margin-left:5px;">
								<a class="btn btn-default" id="btn_verify" disabled style="width: 96px;">获取验证码</a>							
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-4 col-md-offset-5">
							<button type="submit" id="btnSubmit" class="btn btn-info" disabled>注册</button>&nbsp;
							<button type="reset" id="btnReset" class="btn btn-warning">重置</button>
							</div>
						</div>
						<div class="form-group" style="text-align: center;">
							<p>
								已有账号? <a href="{:leuu('user/login/index')}">点击此处登录</a>
							</p>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
		<div class="footerbottom footerbottomdark">
		  <div class="row">
		    <div class="col-md-4 smallspacetop">
		      <p class="smaller" style="padding-left:10px;">
		        <span class="copyright">© </span> Copyright 2017 河南济源钢铁（集团）公司版权所有 
		      </p>
		    </div>
		    <div class="col-md-8 smallspacetop hidden-sm hidden-xs">
		      <div class="pull-right smaller" style="padding-right:10px;">
		        <ul class="footermenu">
		          <li><a href="{:U('page/index',array('id'=>10))}">关于我们</a></li>
				  <li><a href="{:U('page/index',array('id'=>10))}">用户协议</a></li>
				  <li><a href="{:U('page/index',array('id'=>10))}">版权声明</a></li>
				  <li><a href="{:U('page/index',array('id'=>10))}">法律声明</a></li>
				  <li><a href="{:U('page/index',array('id'=>10))}">友情链接</a></li>
		        </ul>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<tc_include file="Public:scripts" />
	<script type="text/javascript">
	$("#btn_verify").click(function(){
		$.ajax({
			 url: "{:U('user/register/send_mobile_verify_code')}",
			 data: 'mobile='+$('#txt_mobile').val(),
			 success: function(data){
		        alert(data.info);
		     }
		});
	});
	var validate_user_fun=function(){
		if($("#txt_nicename").val().length>=2&&$('#txt_mobile').val().length==11){
			$.post({
				 url: "{:U('user/register/validate_user')}",
				 data: {'nicename':$('#txt_nicename').val(),'mobile':$('#txt_mobile').val()},
				 success: function(data){
			        $("#msgSpan").html(data.info);
			        var status=data.status==0;
			        $("#btn_verify").attr('disabled',status);
			        $("#btnSubmit").attr('disabled',status);
			     }
			});
		}
	}
	$("#txt_nicename").blur(validate_user_fun);
	$("#txt_mobile").blur(validate_user_fun);
	</script>
</body>
</html>